<template>
  <div>
    <router-view></router-view>
    <ul class="bottom-tab">
      	<li v-for="(item,index) in links"  @click="$goRoute(item.router)" :key="index">
			<div  @click="changeColor(index)">
				<img :src="item.iconSrc" />
        		<a  :class="{active:index==isActive}" >{{item.text}}</a>
			</div>
			
        </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'index-app',
    data () {
      return {
        isActive:0,
        links: [
			{
				text:'首页',
				router:'/home',
				iconSrc:require('../src/assets/bar-icon0.png')
			},
			{
				text:'列表',
				router:'/firstlist',
				iconSrc:require('../src/assets/bar-icon1.png')
			},
			{
				text:'我的',
				router:'/firstpage',
				iconSrc:require('../src/assets/bar-icon2.png')
			}
        ]
        
      }
    },
    methods:{ 
       changeColor(index){
          this.isActive = index;
       }
     }
  }
</script>
<style>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}

*{
  margin: 0;
  padding: 0;
}
  .bottom-tab{
    width: 100%;
    height: 3.5rem;
    position: fixed;
    bottom: 0;
  }
  .bottom-tab li{
    float: left;
    width: 33.3%;
    height: 100%;
    background: #eee;
    text-align: center;
    color: #333;
  }
  .bottom-tab li img{
	  width: 1.5rem;
	  height:1.5rem;
	display: block;
	margin: 0.2rem auto;
  }
  .bottom-tab li a{
    width: 100%;
    height: 1.5rem;
    display: block;
	line-height: 1.5rem;
	font-size: 0.9rem;
  }
  .active{
    color: #ff5050;
  }

</style>

